<template>
  <div
    class="tab-nav"
    v-tab-current="{
      curIdx: tabIndex,
      className: 'nav-item',
      currentClassName: 'nav-current',
    }"
  >
    <item
      v-for="(item, index) of navData"
      :key="index"
      :index="index"
      :item="item"
    />
  </div>
</template>

<script>
import Item from "./Item";
import { mapState } from "vuex";
import { tabCurrent } from "@/directives";

export default {
  name: "TabNav",
  props: {
    navData: Array,
  },
  computed: {
    ...mapState(["tabIndex"]),
  },
  components: {
    Item,
  },
  directives: {
    tabCurrent,
  },
};
</script>

<style>
.tab-nav {
  height: 50px;
  border-bottom: 1px solid #333;
}
</style>
